<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>发布信息</title>
    <link rel="stylesheet" href="__TMPL__Public/css/normalize.css" />
    <link rel="stylesheet" href="__TMPL__Public/css/main.css?v1" />
    <style type="text/css">
      body,form{overflow-x: hidden;}
      .btn-footer{box-sizing: border-box;}
      #submitbtn{margin-left: 10%;box-sizing: border-box;background: #2ED4BC;color: white;}
      .provinceselector,.typeselector,.cityselector{
        position: absolute;
        padding-left: 10px;
        top: 43px;
        width: 100%;
        background: white;
        display: none;
        overflow: auto;
        height: 300px;
        z-index: 1;
      }
      .select-item{
        border-bottom: solid 1px #eee;
      }
      .select-item:last-child{
        border: none;
      }
      .linebg .halfinput{
        width: 45%;
        display: inline-block;
      }
      input{padding-left: 10px;}
    </style>
  </head> 
  <body>
    <form id="adorder" action="/HAction/kindorder_post" method="post">
      <input type="hidden" name="id" id="id" value="{$id}" />
      <input type="hidden" name="modify" value="{$modify}"/>
      <input type="hidden" name="user_uniq_id" value="{$user.user_uniq_id}"/>
      <input type="hidden" name="status" value="1"/>
      <input type="hidden" name="type" id="type" value="{$order.type}"/>
      <input type="hidden" name="type" id="city_id" value="{$order.city_id}"/>
    <div class="linebg">
      <div class="line-i bb">
        <input type="text" name="name" id="company_name" value="{$order.name}" placeholder="公司名字" />
      </div>
      <div class="line-i bb">
          <input type="text" name="person" id="person"  placeholder="联系人" value="{$order.person}"/>
      </div>
      <div class="line-i bb">
          <input type="text" name="mobile" id="mobile"  placeholder="联系电话" value="{$order.mobile}"/>
      </div>
      <div style="position: relative;" class="line-i bb">
       <input type="text" id="company_type" value="" readonly="readonly" placeholder="选择行业" />
       <div class="typeselector selector">
         <volist name="kind" id="k">
            <div data-id="{$k.id}" class="select-item">{$k.pvalue}</div>   
         </volist>
       </div>
      </div>
      <div style="position: relative;" class="line-i">
       <input type="text" class="halfinput" id="province" value="" readonly="readonly" placeholder="选择省份" />
       <input type="text" class="halfinput" style="display: none;" id="city" value="" readonly="readonly" placeholder="选择城市" />
       <div class="provinceselector selector">
         <volist name="province" id="p">
            <div data-id="{$p.id}" class="select-item">{$p.pvalue}</div>   
         </volist>
       </div>
       <div class="cityselector selector">
        
       </div>
       
      </div>
    </div>
    
    <div class="linebg">
      <div class="line-i bb">
          <input type="text" name="title" id="title"  placeholder="商品名" value="{$order.title}"/>
      </div>
      <div class="line-i bb">
          <input type="text" name="price" id="price"  placeholder="商品价格" value="{$order.price}"/>
      </div>
      <div class="line-i">
        <textarea style="min-height: 150px;height: auto;" name="content" rows="5" cols="" placeholder="相关描述说明">{$order.content}</textarea>
      </div>
    </div>
    <div class="linebg">
      <div class="line-i bb">
        <span class="line-before">展位图</span>
        <span class="line-after noclr"><span>（第一张为封面）</span></span>
      </div>
      <div id="iptbox" class="line-i ipt">
        <div id="addpic" class="iptbox">
          <label for="ippic" style="display: inline-block;line-height: 0;margin-bottom: 15px;">
            <img id="addimg" src="__TMPL__Public/img/addpic.jpg"/>
          </label>
        </div>
        <div class="iptbox"></div>
        <input name="file" onchange="addiptbox()" id="ippic" style="display: none;" type="file" accept="image/*"/>
        <input name="file" onchange="editimg()" id="editpic" style="display: none;" type="file" accept="image/*"/>
        <for start="0" end="$adnum">
          <if condition="($i+1)%4 eq 0">
            <label for="editpic" data-index="{$i}" onclick="setedit(this)" class="warp iptbox"><img src="{$ad[$i].icon}"/></label>
            <else/>
            <label for="editpic" data-index="{$i}" onclick="setedit(this)" class="iptbox"><img src="{$ad[$i].icon}"/></label>
          </if>
        </for>
      </div>
    </div>
    <div class="btn-footer">
      <div>
        <button id="submitbtn" type="button" onclick="submitorder()">确认发布</button>
      </div>
    </div>
    </form>
    <div class="footerbody"></div>
  </body>
  <script src="__TMPL__Public/js/jquery-1.11.0.js"></script>
  <script src="__TMPL__Public/js/main.js?{$version}" ></script>
  <script src="__TMPL__Public/js/ajaxfileupload.js"></script>
  <script type="text/javascript">
    var modify = "{$modify}";
    if(modify==1)$("#city").show();
    //选择行业
      $("#company_type").on("click",function(){
        if($(".typeselector").css("display")=="none"){
          $(".typeselector").show();
        }else{
          $(".typeselector").hide();
        }
      });
      $("#company_type").on("blur",function(){
        setTimeout(function(){
          $(".typeselector").hide();          
        },100);
      })
      $(".typeselector .select-item").on("click",function(event){
        $(".typeselector").hide();
        $("#company_type").val($(this).text());
        $("#type").val($(this).attr("data-id"));
        event.stopPropagation();
      })
      //选择省份
      $("#province").on("click",function(){
        if($(".provinceselector").css("display")=="none"){
          $(".provinceselector").show();
        }else{
          $(".provinceselector").hide();
        }
      });
      $("#province").on("blur",function(){
        setTimeout(function(){
          $(".provinceselector").hide();          
        },100);
      })
      $(".provinceselector .select-item").on("click",function(event){
        var t = $(this);
        $(".provinceselector").hide();   
        $("#province").val($(this).text());
        
        $.post("/HAction/subcity",{
          id:t.attr("data-id")
        },function(res){
          var dt = res.info;
          var html = "";
          if(dt){
            for(var i=0;i<dt.length;++i){
              html += '<div data-id="'+dt[i]["id"]+'" class="select-item">'+dt[i]["pname"]+'</div>'
            }
            $(".cityselector").empty();
            $(".cityselector").append(html);
            $("#city").show();
            $(".cityselector .select-item").on("click",function(event){
              $(".cityselector").hide();
              $("#city").val($(this).text());
              $("#city_id").val($(this).attr("data-id"));
              event.stopPropagation();
            })
          }
        })
        event.stopPropagation();
      })
      //选择城市
      $("#city").on("blur",function(){
        setTimeout(function(){
          $(".cityselector").hide();          
        },100);
      })
      $("#city").on("click",function(){
        if($(".cityselector").css("display")=="none"){
          $(".cityselector").show();
        }else{
          $(".cityselector").hide();
        }
      });
      
      
      if(modify==1){
        $("#company_type").val("{$order.pvalue}");
      }
      $(".iptbox img").each(function(){
        $(this).height($(this).width());
      });
      
  var imglen= parseInt("{$adnum}");
  toast.init();
  var _load = new loader();
    _load.init("/themes/simplebootx_mobile/Public/img/loading.gif");
    var dg = new dialog("tip");
    var submiting = false;
    function submitorder(){
      if(submiting)return;
//      console.log($("#addpic").children().length);
      if(imglen<=0){
        toast.show("请上传要展示的图片");return false;
      }
      if($("#company_name").val().length==0){
        toast.show("请输入公司名字");return false;
      }
      if($("#company_type").val().length==0){
        toast.show("请选择行业");return false;
      }
      if($("#city_id").val().length==0){
        toast.show("请选择城市");return false;
      }
      if($("#price").val().length==0){
        toast.show("请输入商品价格");return false;
      }
      if($("#mobile").val().length!=11){
        toast.show("联系电话格式不正确");return false;
      }
      if($("#person").val().length==0){
        toast.show("请输入联系人");return false;
      }
      if($("#title").val().length==0){
        toast.show("请输入商品名");return false;
      }
      if(isNaN($("#price").val())){
        toast.show("商品价格错误");return false;
      }
      
      submiting = true;
      $("#submitbtn").text("提交中...");
      $("#adorder").submit();
    }
    var iptbox = $("#iptbox");
    var uping = false; 
    function addiptbox(){
      if(uping)return;
      uping = true;
      upfile(
        function(data){
          var nodeh="";
          if(iptbox.children(".iptbox").length%5==0){
            nodeh = '<label style="height:0;" for="editpic" data-index="'+imglen+
            '" onclick="setedit(this)" class="iptbox warp"><img src="'+data+'"/></label>';
          }
          else nodeh = '<label style="height:0;" for="editpic" data-index="'+imglen+
          '" onclick="setedit(this)" class="iptbox"><img src="'+data+'"/></label>';
          iptbox.append(nodeh);
          var ipchild= iptbox.children(".iptbox:last-child");
          ipchild.css("max-height",addimg.width());
          ipchild.animate({"height":addimg.width()},1000,"swing");
          uping = false;
        }
      );
    }
    var _edimg = null;
    function setedit(t){
      _edimg = t;
    }
    function editimg(){
      editfile($(_edimg));
    }
    
  var addimg = $("#addimg");
  function upstart(inputimg){
    if(inputimg){
      inputimg.addClass("uping");
      inputimg.attr("src","/themes/simplebootx_mobile/Public/img/loading.gif");
    }else{
      addimg.addClass("uping");
      addimg.attr("src","/themes/simplebootx_mobile/Public/img/loading.gif");
    }
    
  }
  function upend(inputimg){
    if(inputimg){
      inputimg.removeClass("uping");
      inputimg.attr("src","/themes/simplebootx_mobile/Public/img/addpic.jpg");
    }else{
      addimg.removeClass("uping");
      addimg.attr("src","/themes/simplebootx_mobile/Public/img/addpic.jpg");
    }
  }
  
    function upfile(callback){
      upstart();
      $.ajaxFileUpload({
              url:'/api/AppGroup/image_upload/',//处理图片脚本
              secureuri :false,
              fileElementId :'ippic',//file控件id
              dataType : 'content',
              success:function (data, status){
              var dt = ajaxStrToObj(data);
              callback(dt.data);
              $.post("/HAction/upimg",{"url":dt.data,"index":imglen,"modify":modify,"type":1},
                function(data){
                  imglen++;
                  console.log("index:"+imglen);
                },"json");
              addimg.removeClass("uping");
              upend();
              },
              error:function(data, status, e){
                  console.log(e);
                  upend();
              }
        });
    }
    function editfile(_input){
      upstart(_input.children());
      $.ajaxFileUpload({
              url:'/api/AppGroup/image_upload/',//处理图片脚本
              secureuri :false,
              fileElementId :'editpic',//file控件id
              dataType : 'content',
              success:function (data, status){
              var dt = ajaxStrToObj(data);
              $.post("/HAction/upimg",{"url":dt.data,"index": _input.attr("data-index")},
                function(){
                  var _intch = _input.children();
                  _intch.attr("src",dt.data);
                  _intch.height(_intch.width());
                },"json");
                upend(_input.children());
              },
              error:function(data, status, e){
                upend(_input.children());
                  console.log(e);
              }
        });
    }
  </script>
</html>
